<template>
	<view class="pa">
		<view class="pro_banner">
			<swiper class="swiper"
			indicator-dots="true" 
			indicator-active-color="#ffffff"
			indicator-color="rgba(255, 255, 255, .5)">
				<swiper-item><image class="pic" src="../../static/image/mine/integral/bigpic.png" mode=""></image></swiper-item>
				<swiper-item><image class="pic" src="../../static/image/mine/integral/bigpic.png" mode=""></image></swiper-item>
				<swiper-item><image class="pic" src="../../static/image/mine/integral/bigpic.png" mode=""></image></swiper-item>
			</swiper>
	<!-- 		<view class="cutdown" v-if="type == 1">
				<image src="../../static/image/mine/index/timelimit.png" mode=""></image>
				<view class="cutdown_cutdown">
					抢购倒计时：
					<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdown>
				</view>
			</view>
			<view class="cutdown" v-else-if="type == 3">
				<view class="group_team">
					<image src="../../static/image/mine/index/groupteam.png" mode=""></image>
					3人成团
				</view>
				<view class="cutdown_cutdown">
					拼团倒计时：
					<uni-countdown :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdown>
				</view>
			</view> -->
		</view>
		<view class="newSeckill"  v-if="type == 1">
			<image src="../../static/image/mine/new/cutdown_banner.png" mode=""></image>
			<view class="newSeckill_content">
				<view class="newSeckill_content_l">
					<image src="../../static/image/mine/index/logo.png" mode=""></image>
					正在秒杀中
				</view>
				<view class="newSeckill_content_r">
					<view class="title">
						距离结束时间
					</view>
					<uni-countdown
					:day="1" 
					:hour="12" 
					:minute="12" 
					:second="12"></uni-countdown>
				</view>
			</view>
		</view>
		<view class="newSeckill"  v-if="type == 3">
			<image src="../../static/image/mine/new/cutdown_banner.png" mode=""></image>
			<view class="newSeckill_content">
				<view class="newSeckill_content_l">
					3人成团
				</view>
				<view class="newSeckill_content_r">
					<view class="title">
						距离结束时间
					</view>
					<uni-countdown
					:day="1" 
					:hour="12" 
					:minute="12" 
					:second="12"></uni-countdown>
				</view>
			</view>
		</view>
		<view class="proDetail">
			<view class="proDetail_one">
				<view class="proDetail_one_l">
					<view class="price" v-if="type == 2">
						1200 <text>/积分</text>
					</view>
					<view class="price" v-else>
						<text>￥</text>129.00
					</view>
					<view class="line_price">
						￥199.00
					</view>
				</view>
				<view class="proDetail_one_r">
					库存：4564件
				</view>
			</view>
			<view class="proDetail_title">
				苹果水果新鲜当季整箱陕西红富士应季苹果
			</view>
			<view class="proDetail_three">
				<view class="proDetail_three_desc">
					多吃多营养，全家共享
				</view>
				<view class="proDetail_three_desc">
					销量：4546
				</view>
			</view>
		</view>
		<view class="quality">
			<view class="quality_item" v-for="(item, key) in quality">
				<image :src="item.pic" mode=""></image>
				{{ item.info }}
			</view>
		</view>
		<!-- 规格 -->
		<view class="standard" v-if="type == 0">
			<view class="standard_tips">选择</view>
			<view class="standard_choose" @tap="choosestandard">
				<input type="text" disabled="true" placeholder="请选择规格" v-model="sizeitem" />
				<i class="icon">&#xe637;</i>
			</view>
		</view>
		<!-- 优惠 -->
		<view class="favorable" @tap="openFavorable" v-if="type == 0">
			<view class="favorable_f">
				<view class="favorable_tips">
					优惠
				</view>
				<view class="favorable_favorable">
					<view class="favorable_favorable_redpaper">
						用红包最多可抵扣 <text>￥4.00</text>
					</view>
					<view class="favorable_favorable_coupon">
						<view class="hint">
							领券
						</view>
						<view class="discount_coupon">
							满288减180
						</view>
					</view>
				</view>
			</view>
			<i class="icon">&#xe637;</i>
		</view>
		<view class="" v-if="type == 3">
			<!-- 进行中的拼团 -->
			<view class="nowgroup">
				<view class="productdetail_title">
					进行中的拼团
				</view>
				<view class="nowgroup_more" @tap="toMoreGroup">
					更多<i class="icon">&#xe637;</i>
				</view>
			</view>
			<now-group @clustering="clustering"></now-group>
			<!-- 拼团流程 -->
			<view class="group_flow">
				<view class="group_flow_title">
					拼团流程
				</view>
				<image src="../../static/image/mine/index/grouflow.png" mode=""></image>
			</view>
		</view>
		<view class="share" @tap="sharpro">
			<image src="../../static/image/mine/integral/share.png" mode=""></image>
			分享
		</view>
		<view class="totop" @tap="returnTop">
			<i class="icon">&#xe661;</i>
			顶部
		</view>
		<view class="bottom" v-if="type == 0 ">
			<view class="addcar" @tap="joinCart">加入购物车</view>
			<view class="nowbuy" @tap="rightNowBuy">立即购买</view>
		</view>
		<view class="bottom" v-else-if="type == 1">
			<view class="addcar" >加入购物车</view>
			<view class="nowbuy">立即购买</view>
		</view>
		<view class="bottom" v-else-if="type == 2">
			<view class="btn">
				立即兑换
			</view>
		</view>
		<view class="bottom bottomgroup" v-else-if="type == 3">
			<view class="rightnow_group">
				￥5.68立即开团
			</view>
		</view>
		<uni-popup ref="standard" type="bottom">
			<view class="standard_content">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="product_info">
					<image class="pro_pic" src="../../static/image/mine/index/product01.png" mode=""></image>
					<view class="product_info_info">
						<view class="price">
							￥199.00
							<text>166.00</text>
						</view>
						<view class="inventory">库存455件</view>
						<view class="tochoose" v-if="!sizeitem">请选择 苹果果径</view>
						<view class="tochoose" v-else>已选择 {{sizeitem}}</view>
					</view>
				</view>
				<view class="weight">
					<view class="tilte">重量 (不含箱)</view>
					<scroll-view scroll-x="true" class="choose_weight">
						<view :class="['product_weight', weightindex == index ? 'product_weight_i' : '']" @tap="chooseweight(index)" v-for="(item, index) in product_weight">
							{{ item }}
						</view>
					</scroll-view>
				</view>
				<view class="weight">
					<view class="tilte">苹果果径</view>
					<scroll-view scroll-x="true" class="choose_weight">
						<view :class="['product_size', sizeitem == item ? 'product_size_i' : '']" 
						@tap="choosesize(item)" 
						v-for="(item, index) in product_size">{{ item }}</view>
					</scroll-view>
				</view>
				<view class="buy_num">
					<view class="title">购买数量</view>
					<view class="num">
						<image src="../../static/image/mine/index/delet01.png" mode=""></image>
						<text>1</text>
						<image src="../../static/image/mine/index/add02.png" mode=""></image>
					</view>
				</view>
				<view class="btn" @tap="confirmStand">确定</view>
			</view>
		</uni-popup>
		<uni-popup ref="share" type="bottom">
			<view class="product_share">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="product_share_title">分享至</view>
				<view class="product_share_way">
					<view class="product_share_way_item">
						<image src="../../static/image/mine/index/wechat.png" mode=""></image>
						<text>分享给好友</text>
					</view>
					<view class="product_share_way_item" @tap="sharebanner">
						<image src="../../static/image/mine/index/friend.png" mode=""></image>
						<text>生成分享图</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="sharebanner" type="center">
			<view class="sharebanner_bg">
				<!-- 	<image src="../../static/image/mine/index/canvas_banner.png" mode=""></image>
				<view class="sharebanner_info">
					<image class="sharebanner_info_product" src="../../static/image/mine/index/canvas_product.png" mode=""></image>
					<view class="title">花牛苹果 约950g</view>
					<view class="desc">多吃多营养，全家共享</view>
					<view class="price">
						￥129.00  <text>￥119.00</text>
					</view>
				</view>
				<view class="sharebanner_info_pic">
					<image class="sharebanner_info_pic_logo" src="../../static/image/mine/index/canvas_logo.png" mode=""></image>
					<image class="sharebanner_info_pic_ewm" src="../../static/image/mine/index/canvas_ewm.png" mode=""></image>
				</view> -->
			</view>
			<view class="save_pic">保存图片</view>
		</uni-popup>
		<uni-popup ref="groupbooking" type="bottom">
			<view class="team">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="team_one">
					一起参与拼团
				</view>
				<view class="team_product_title">
					花牛苹果约950g(超出按拼团价不差)
				</view>
				<view class="team_count_down">
					结束倒计时： <uni-countdowno :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdowno>
				</view>
				<view class="team_user_header">
					<view class="header_pic">
						<image src="../../static/image/mine/discount/header01.png" mode=""></image>
						<view class="colonel">
							团长
						</view>
					</view>
					<view class="header_pic">
						<image src="../../static/image/mine/discount/header02.png" mode=""></image>
					</view>
					<view class="header_pic">
						<image class="query" src="../../static/image/mine/index/query.png" mode=""></image>
					</view>
				</view>
				<view class="ream_residue_num">
					还剩2个名额抓紧参加吧
				</view>
				<view class="makesure_group">
					确认拼团
				</view>
			</view>
		</uni-popup>
		<!-- 优惠券弹窗 -->
		<uni-popup ref="favorable" type="bottom">
			<view class="favorableBox">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="favorableBox_title">
					优惠
				</view>
				<view class="favorableBox_redpaper">
					用红包最多可以抵扣<text>￥3.78</text>
				</view>
				<view class="favorableBox_title_t">
					优惠券
				</view>
				<scroll-view class="favorableBox_discount" scroll-y>
					<view class="list" v-for="(item,index) in discountlist">
						<image src="../../static/image/mine/index/order_discount1.png" mode=""></image>
						<view class="list_content">
							<view class="price">
								<view class="price_p">
									￥<text>{{item.price}}</text>
								</view>
								<view class="price_rule">
									{{item.rule}}
								</view>
							</view>
							<view class="info">
								<view class="info_title">{{item.title}}</view>
								<!-- <view class="info_detail">{{item.rule}}</view> -->
								<view class="info_date">{{item.start_time}}-{{item.end_time}}</view>
							</view>
							<view class="getdiscount">
								立即领取
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<view style="width:0px;height:0px;overflow:hidden;">
			<canvas canvas-id="mycanvas" style="width: 271px; height: 425px;"></canvas>
		</view>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
import nowGroup from '@/components/nowgroup/nowgroup.vue'
import uniCountdowno from '@/components/uni-countdown/uni-countdown1.vue';
export default {
	components: { uniPopup, uniCountdown, nowGroup, uniCountdowno },
	data() {
		return {
			standard: '请选择规格',
			product_weight: ['10斤', '20斤', '10斤', '20斤', '10斤', '20斤', '10斤', '20斤'],
			product_size: ['60mm-65mm', '65mm-70mm', '75mm-80mm', '80mm-85mm'],
			weightindex: 0,
			sizeindex: 0,
			sizeitem: '', //选中的规格
			base: '', 
			type: '', //判断进来的路径  是积分还是秒杀  或者普通商品
			standardState: 0,
			canvaspic: {
				bg: '../../static/image/mine/index/canvas_banner.png',
				pro: '../../static/image/mine/index/canvas_product.png',
				logo: '../../static/image/mine/index/canvas_logo.png',
				ewm: '../../static/image/mine/index/canvas_ewm.png'
			},
			discountlist: [
				{
					price: 3,
					title: '满减优惠券',
					rule: '订单满30元使用',
					start_time: '2019.12.06',
					end_time: '2020.1.06',
					day: 4,
					flag: false
				},
				{
					price: 3,
					title: '满减优惠券',
					rule: '订单满30元使用',
					start_time: '2019.12.06',
					end_time: '2020.1.06',
					day: 4,
					flag: false
				},
				{
					price: 3,
					title: '满减优惠券',
					rule: '订单满30元使用',
					start_time: '2019.12.06',
					end_time: '2020.1.06',
					day: 4,
					flag: false
				}
			],
			quality: [
				{
					pic: '../../static/image/mine/integral/quality1.png',
					info: '0起送0运费'
				},
				{
					pic: '../../static/image/mine/integral/quality2.png',
					info: '晚到必陪'
				},
				{
					pic: '../../static/image/mine/integral/quality3.png',
					info: '100%检'
				},
				{
					pic: '../../static/image/mine/integral/quality4.png',
					info: '包退包赔'
				}
			]
		};
	},
	onLoad(options) {
		this.type = options.type
		console.log(this.type);
	},
	methods: {
		// 查看更多拼团
		toMoreGroup () {
			uni.navigateTo({
				url: '/pageB/group/moreGroup'
			})
		},
		// 回到顶部
		returnTop () {
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 300
			});
		},
		// 打开规格选择
		choosestandard() {
			this.standardState = 0,
			this.$refs.standard.open();
		},
		// 打开优惠券弹窗
		openFavorable () {
			this.$refs.favorable.open();
		},
		chooseweight(index) {
			this.weightindex = index;
		},
		// choosesize(index) {
		// 	this.sizeindex = index;
		// },
		choosesize(item) {
			this.sizeitem = item;
		},
		closestand() {
			this.$refs.standard.close();
			this.$refs.share.close();
			this.$refs.groupbooking.close()
			this.$refs.favorable.close()
		},
		sharpro() {
			this.$refs.share.open();
		},
		sharebanner() {
			this.$refs.share.close();
			this.$refs.sharebanner.open();
		},
		// 确定规格 
		confirmStand () {
			if(!this.sizeitem) {
				this.toast('请选择果径')
				return false
			}
			this.$refs.standard.close();
			if(this.standardState == 2) {
				uni.navigateTo({
					url: '/pageB/order/confirmorder'
				});
			}else {
				this.toast('加入购物车')
			}
		},
		// 立即购买
		rightNowBuy() {
			// 改变规格的状态 判断是该加入购物车 还是跳转到下一页
			this.standardState = 2
			this.$refs.standard.open()
			
		},
		// 加入购物车 
		joinCart () {
			this.standardState = 1
			this.$refs.standard.open()
		},
		// 参与拼团
		clustering (e) {
			console.log(e);
			this.$refs.groupbooking.open()
		},
		// 生成海报
		resultbanner() {
			console.log(11);
			const ctx = uni.createCanvasContext('mycanvas');
			ctx.beginPath();
			ctx.drawImage(this.canvaspic.bg, 0, 0, 271, 425);
			ctx.arc(25, 21, 5, 1 * Math.PI, 1.5 * Math.PI);
			ctx.setStrokeStyle('#333333');
			ctx.stroke();
			// 设置商品图片
			ctx.drawImage(this.canvaspic.pro, 20, 15, 230, 220);
			// 设置标题
			ctx.setFillStyle('#000');
			ctx.setFontSize(18);
			var mearcititle = ctx.measureText('花牛苹果 约950g');
			ctx.fillText('花牛苹果 约950g', (271 - mearcititle.width) / 2, 260);
			// 设置描述
			ctx.setFillStyle('#999');
			ctx.setFontSize(12);
			var mearcidesc = ctx.measureText('多吃多营养，全家共享');
			ctx.fillText('多吃多营养，全家共享', (271 - mearcidesc.width) / 2, 280);
			// 设置价格
			ctx.setFillStyle('#f73e2f');
			ctx.setFontSize(16);
			var mearciprice = ctx.measureText('￥129.00');
			ctx.fillText('￥129.00', 135 - mearciprice.width, 310);
			// 设置划线价格
			ctx.setFillStyle('#999');
			ctx.setFontSize(12);
			var mearcilineprice = ctx.measureText('￥110.00');
			ctx.fillText('￥110.00', 140, 310);
			// 线
			ctx.moveTo(140, 306);
			ctx.lineTo(140 + mearcilineprice.width, 306);
			ctx.stroke();
			// 设置logo
			ctx.drawImage(this.canvaspic.logo, 15, 355, 130, 38);
			ctx.drawImage(this.canvaspic.ewm, 180, 335, 80, 80);
			ctx.draw();
			setTimeout(() => {
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: function(res) {
						// 在H5平台下，tempFilePath 为 base64
						console.log(res.tempFilePath);
						this.base = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								console.log(111);
							}
						});
					}
				});
			}, 800);
		}
	}
};
</script>

<style lang="less" scoped>
@import url('../../static/scss/pageB/productdetail.less');
</style>
